<template>
  <div>
    <div >以色列创新指数和世界银行《营商报告》得分</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

let data = {
  "chart": [{
    month: "2016",
    value: 73,
    ratio: 21
  },

  {
    month: "2017",
    value: 74.2,
    ratio: 17
  },

  {
    month: "2018",
    value: 74.3,
    ratio: 11
  },

  {
    month: "2019",
    value: 75,
    ratio: 10
  },

  {
    month: "2020",
    value: 76.7,
    ratio: 13
  },


  {
    month: "2021",
    value: 77.2,
    ratio: 11
  }

  ]
}


let xAxisMonth = [],
  barData = [],
  lineData = [];
for (let i = 0; i < data.chart.length; i++) {
  xAxisMonth.push(data.chart[i].month);
  barData.push({
    "name": xAxisMonth[i],
    "value": data.chart[i].value
  });
  lineData.push({
    "name": xAxisMonth[i],
    "value": data.chart[i].ratio
  });
}

// 获取 dom 实例
const target = ref(null)

// echarts 实例变量
let mChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  mChart = echarts.init(target.value)
  // 渲染 echarts
  renderChart()
})


// 渲染图表
const renderChart = () => {
  const options = {
  
    grid: {
      top: '0%',
      right: '7%',
      bottom: '0%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none'
      },
      formatter: function (params) {
        return params[0]["data"].name + "<br/>" + '世界银行《营商报告》得分: ' + params[1]["data"].value + "<br/>" + '全球创新指数排名: ' + params[0]["data"].value;
      }
    },
    xAxis: [{
      type: 'category',
      show: false,
      data: ['2016', '2017', '2018', '2019', '2020', '2021'],
      axisLabel: {
        textStyle: {
          color: '#b6b5ab'
        }
      }
    },
    {
      type: 'category',
      position: "bottom",
      data: xAxisMonth,
      boundaryGap: true,
      // offset: 40,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#b6b5ab'
        }
      }
    }

    ],
    yAxis: [{
      show: true,
      offset: 35,
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)"
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true
      },
      axisLabel: {
        show: true,
        color: '#b6b5ab'
      }
    }, {
      show: false,
      type: "value",
      name: "合格率(%)",
      nameTextStyle: {
        color: '#ccc'
      },
      axisLabel: {
        color: '#ccc'
      },
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    }],
    color: ['#e54035'],
    series: [{
      name: '训练人次',
      type: 'pictorialBar',
      xAxisIndex: 1,
      barCategoryGap: '-80%',
      // barCategoryGap: '-5%',
      symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
      itemStyle: {
        normal: {
          color: function (params) {
            let colorList = [
              'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)',
              'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)',
              'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)'
            ];
            return colorList[params.dataIndex];
          }
        },
        emphasis: {
          opacity: 1
        }
      },
      data: barData,
    },
    {
      symbol: 'image://',
      symbolSize: 42,
      name: "完成率",
      type: "line",
      yAxisIndex: 1,
      data: lineData,
      itemStyle: {
        normal: {
          borderWidth: 5,
          color: {
            colorStops: [{
              offset: 0,
              color: '#821eff'
            },

            {
              offset: 1,
              color: '#204fff'
            }
            ],
          }
        }
      }
    }
    ]
  };
  mChart.setOption(options)
}

// 监听数据的变化，重新渲染图表
// watch(
//   () => regions,
//   () => {
//     renderChart()
//   }, {
//   deep: true
// }

// )
</script>

<style lang="scss" scoped></style>
